/**
 * Created by Ysssssss on 21/1/18.
 */

import React, { useEffect } from 'react';
import { Menu, Dropdown, Button, Breadcrumb } from 'antd'
import { withRouter } from "react-router-dom";
import { useSelector } from "react-redux";
import BilinIcon from "@common/presentational/BilinIcon";

const PageHeader = (props) => {
    const { history } = props
    const { buttonInfo, breadcrumbInfo } = useSelector(state => state.common)
    const { permissionTag } = useSelector(state => state.user)

    const handleClick = (e) => {
        let pathname = e.key || e.currentTarget.dataset?.url
        history.push(pathname)
    }
    const menu = (
        <Menu>
            { permissionTag.isAdmin && permissionTag.isBrand ? (
                <Menu.Item key="/store-list" onClick={handleClick}>
                    <div className="flex-vertical-center pd-8" style={{width: 80}}>
                        <BilinIcon type="shop" className="mgr-8"/>
                        <span>店铺</span>
                    </div>
                </Menu.Item>
            ) : null }
            { permissionTag.isAdmin ? (
                <Menu.Item key="/payment/wechat" onClick={handleClick}>
                    <div className="flex-vertical-center pd-8" style={{width: 80}}>
                        <BilinIcon type="payment" className="mgr-8"/>
                        <span>收款</span>
                    </div>
                </Menu.Item>
            ) : null }
            { permissionTag.isAdmin ? (
                <Menu.Item key="/employee/list" onClick={handleClick}>
                    <div className="flex-vertical-center pd-8" style={{width: 80}}>
                        <BilinIcon type="employee" className="mgr-8"/>
                        <span>员工</span>
                    </div>
                </Menu.Item>
            ) : null }
        </Menu>
    );
    return (
        <div className="bilin-web-header">
            <div className="lex-vertical-center">
                {(buttonInfo || []).map(({ text, ...buttonProps }, index) => (
                    <Button key={`button_${index}`} {...buttonProps}>{text}</Button>
                ))}
                {breadcrumbInfo && <Breadcrumb>
                    {(breadcrumbInfo || []).map(({ text, link, ...breadProps }, index) => (
                        <Breadcrumb.Item key={index} {...breadProps}>
                            {link ? <span className='cur-poi' data-url={link} onClick={handleClick}>{text}</span> : <span>{text}</span>}
                        </Breadcrumb.Item>
                    ))}
                </Breadcrumb>}
            </div>
            <div className="flex-vertical-center">
                <div className="ft-hover mgl-24"
                    data-url="/product-center/type"
                    onClick={handleClick}
                >
                    <BilinIcon type="product" className="mgr-4" />
                    <span>商品库</span>
                </div>
                <div className="ft-hover mgl-24"
                    data-url="/warehouse/manage"
                    onClick={handleClick}
                >
                    <BilinIcon type="inventory" className="mgr-4" />
                    <span>仓库</span>
                </div>
                { permissionTag.isAdmin ? (
                    <Dropdown overlay={menu} placement="bottomCenter">
                        <div className="ft-hover mgl-24">
                            <BilinIcon type="more" className="mgr-4" />
                            <span>其他</span>
                        </div>
                    </Dropdown>
                ) : null  }
            </div>
        </div>
    )
}

export default withRouter(PageHeader)